<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">      
        <p>countRef:{{countRef}}</p>
        <p>personReactive.count:{{personReactive.count}}</p>
        <input type="button" value="修改count" @click="changeCount">
    </div>
</body>
</html>

<script src="./js/vue.global.js"></script>
<script>    

    // 把ref对象赋给reactive，会自动解包。
    // 进一步解释：把ref对象作为某个对象的属性值，并把该对象传给reactive，那么ref会自动解包

    const {createApp,ref,reactive} = Vue;

    let app = createApp({
        setup(){

            // 1、定义一个ref对象
            let countRef = ref(12);
            

            // 2、把ref对象作为某个对象的属性值，并把该对象传给reactive，
            // 1）、那么ref会自动解包（把value属性取出来）
            // 2）、ref和对象的属性形成了关联关系。
            let personReactive = reactive({
                count:countRef //会解包，并且还会把count属性和countRef对象关联起来。
            });            
                        
            console.log("personReactive.count",personReactive.count);//12；其实是代理对象读取count属性时，调用了get，get函数里返回的是ref对象的value属性
            console.log(personReactive.count===countRef);//false
            console.log(personReactive.count===countRef.value);//true    

            function changeCount(){
                personReactive.count++;//修改reactive对象的属性时，ref的值也会变化。
                console.log("countRef.value",countRef.value);
            }

            // 3、如果没有reactive，肯定不会解包
            let obj = {
                count:countRef
            }

            console.log("obj.count",obj.count);//ref对象           

            return {
                countRef,personReactive,changeCount
            }
        }
    })

    app.mount("#app");

</script>